<template>
	<view class="content padding-top">
		<view style="position: relative;z-index: 999999;">
			<u-picker v-model="showTime" mode="time"></u-picker>

			<view class="head flex justify-center align-center " v-if="0">
				<u-search placeholder="搜索栋/单元/门牌号/手机号" v-model="keyword" :show-action="false"></u-search>
			</view>
			<u-sticky class="" v-if='0'>
				<view class="tltle flex align-center justify-between padding-lr-lg margin-bottom-sm">
					<text class="text-df">
						缴费总金额：
						<text class="text-price text-red">{{ initInfo.sum || '' }}</text>
					</text>
				</view>
			</u-sticky>

			<view class="xiaoqu" v-if="yin">
				<view :key="index" class="details" v-for="(item, index) in initInfo.propertyList" @click="search(item.id, item.name)">
					{{ item.name }}
				</view>
			</view>
		</view>

		<block v-for="(item, index) in payInfo" :key="index" class="">
			
			<view
				v-if='item.property.userId  == smmUser.id'
				class="info padding flex flex-direction bg-white radius   shadow"
				@click="jump(item.property.id)"
			>
				<view class="flex justify-between padding-tb-sm solid-bottom text-cut response">
					<text class=" text-cut ">{{ item.property.address }} {{ item.property.name }}</text>
				</view>

				<view>
					<view class="flex justify-between align-center padding-tb-sm solid-bottom">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>缴费总金额:</text>
						</view>
						<text>{{ item.count }}元</text>
					</view>
					<view class="flex justify-between align-center padding-tb-sm solid-bottom">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>小区负责人:</text>
						</view>
						<text v-if="item.user.nickName">{{ item.user.nickName }}</text>
						<text v-else class="text-orange">暂无负责人</text>
					</view>

					<view class="flex justify-between align-center padding-tb-sm solid-bottom" v-if="0">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>联系电话:</text>
						</view>
						<text>{{ item.property.contact_details }}</text>
					</view>
					<view class="flex justify-between align-center padding-tb-sm solid-bottom" v-if="0">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>缴费时间:</text>
						</view>
						<text>{{ item.property.creationDate }}</text>
					</view>
					<view class="flex justify-between align-center padding-tb-sm solid-bottom" v-if="0">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>交易时间:</text>
						</view>
						<text>{{ item.property.creationDate }}</text>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			keyName: '小区',
			keyword: '',
			showTime: false,
			down: '',
			count: 1,
			payInfo: [],
			initInfo: {},
			yin: false,
			smmUser: {},
		};
	},
	onLoad() {
		this.smmUser = app.globalData.smmUser;
		var that = this;
		this.getPayInfo();
		console.log('this.smmUser: ', this.smmUser);
		// app.globalData.api.getEEPayment().then(res => {
		// 	that.initInfo = res.resultObj;
		// });
	},
	methods: {
		// search(porpertyId,name){
		// 	var that = this
		// 	this.yin = false;
		// 	app.globalData.api.getALLUserPropertyPay(porpertyId).then(res=>{
		// 		that.payInfo = res.resultObj;
		// 		that.keyName = name;
		// 	})
		// },
		getPayInfo() {
			var date = new Date();
			var year = date.getFullYear(); //获取完整的年份(4位)
			console.log('year :>> ', year);
			var month = date.getMonth(); //获取当前月份(0-11,0代表1月)
			console.log('month :>> ', month);
			var that = this;
			app.globalData.api
				.getPropertyAndPay({
					payDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
				})
				.then(res => {
					console.log('res :>> ', res.resultObj);
					that.payInfo = res.resultObj;
				});
		},
		jump(id) {
			console.log('id: ', id);
			uni.navigateTo({
				url: 'eePaymentCopy?id=' + id,
			});
		},
		countt(count) {
			this.count = count;
			if (count == 1) {
				this.yin = false;
				this.getPayInfo();

				this.keyName = '小区';
			}
			if (count == 2) {
				this.yin = !this.yin;
			}
			if (count == 3) {
				this.showTime = true;
				this.yin = false;
			}
		},
		downn(down) {
			this.down = down;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.red {
		background-color: red;
	}
	.head {
		width: 100vw;
		height: 100rpx;
		background-color: #f8ce39;
		/deep/ .u-search {
			display: flex;
			align-items: center;
			width: 690rpx;
		}
	}
	.styleRed {
		color: #f8ce39;

		font-weight: 600;
		transition: 1s font-weight;
		//font-size: 32rpx;
	}
	.tltle {
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
	}
	.flg {
		width: 100vw;
		height: 104rpx;
	}
	.info {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 25rpx;
	}
}
.xiaoqu {
	width: 100%;
	height: 480rpx;
	padding: 25rpx 25rpx 80rpx;
	background-color: #ffffff;
	overflow: auto;
	overflow-y: scroll;
	z-index: 999990;
}
.details {
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 1px solid #ebebeb;
	color: #5b5b5b;
}
.yin {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.navss {
	background-color: #f6f6f6;
	z-index: 99999999;
}
</style>
